<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:p="http://primefaces.org/ui" xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>#{title}</title>

  <!-- Contexto da aplicação -->
  <c:set var="ctx" value="#{facesContext.externalContext.request.contextPath}" />

  <!-- Ionicons -->
  <link href="#{ctx}/resources/css/ionicons.min.css" rel="stylesheet" type="text/css" />
  <!-- Theme style -->
  <link href="#{ctx}/resources/css/fature-web.css" rel="stylesheet" type="text/css" />
  <!-- BOOTSTRAP STYLES-->
  <link href="#{ctx}/resources/css/bootstrap.css" rel="stylesheet" />
  <!-- FONTAWESOME STYLES-->
  <link href="#{ctx}/resources/css/font-awesome.css" rel="stylesheet" />
  <!-- CUSTOM STYLES-->
  <link href="#{ctx}/resources/css/custom.css" rel="stylesheet" />

  <style type="text/css">
html, body {
  height: 100%;
  font-family: VarelaRound-Regular, 'Source Sans Pro', sans-serif !important;
  /*font-size: 1.1em; */
  color: #000 !important;
}

.formDados {
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 77px;
  overflow: auto;
  padding: 10px;
  background: transparent;
}

.paginaForm {
  /* background-color: white;
  box-shadow: 0 0 30px #888;*/
  height: auto;
  margin-bottom: 10px;
  /*padding: 10px;*/
  display: table;
  width: 100%;
}
</style>

</h:head>
<h:body>

  <h:form id="frmDados" styleClass="formDados" enctype="multipart/form-data">

    <div class="paginaForm">

      <h:panelGroup id="panelTemplate">

        <p:ajaxStatus>
          <f:facet name="start">

            <!-- Só bloquear a tela. -->
            <div id="divBloquearTela" class="af_dialog_blocked-area"></div>

            <!-- Mostrar o conteúdo. -->
            <div class="af_dialog_container" id="divBloquearTela2">
              <p:graphicImage name="imagens/my_preloader.gif" />
              <span style="margin-left: 20px;">Aguarde, processando solicitação...</span>
            </div>
          </f:facet>
        </p:ajaxStatus>

        <h:panelGroup styleClass="fonte" layout="block" rendered="#{facesContext.maximumSeverity != null}">
          <p:messages id="msg" showDetail="false" autoUpdate="true" closable="false" />
        </h:panelGroup>

        <!-- Template crud here -->
        <ui:insert name="body" />
      </h:panelGroup>

    </div>

  </h:form>

  <!-- JQUERY SCRIPTS -->
  <script src="#{ctx}/resources/js/jquery.maskedinput-1.3.min.js"></script>
  <!-- BOOTSTRAP SCRIPTS -->
  <script src="#{ctx}/resources/js/bootstrap.min.js"></script>
  <!-- METISMENU SCRIPTS -->
  <script src="#{ctx}/resources/js/jquery.metisMenu.js"></script>
  <!-- CUSTOM SCRIPTS -->
  <script src="#{ctx}/resources/js/custom.js"></script>

</h:body>
</html>